<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Real-time Ratings</title>
    <!--    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>-->
    <script src="js/echarts.js"></script>
    <style>
        body {
            background-color: #f4f7f9;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
        }
        #header {
            background-color: #3a3f51;
            color: white;
            text-align: center;
            padding: 1rem 0;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        #header h1 {
            margin: 0;
            font-size: 1.8rem;
        }
        #chart-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: calc(100vh - 60px);
            padding: 20px;
        }
        #chart {
            width: 100%;
            max-width: 800px;
            height: 500px;
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }
    </style>
</head>
<body>
<div id="header">
    <h1>实时评分监控</h1>
</div>
<div id="chart-container">
    <div id="chart"></div>
</div>

<script>
    var chart = echarts.init(document.getElementById('chart'));

    var option = {
        title: {
            text: '实时评分',
            left: 'center',
            textStyle: {
                color: '#333',
                fontSize: 24,
                fontWeight: 'bold'
            }
        },
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(50, 50, 50, 0.7)',
            textStyle: {
                color: '#fff'
            }
        },
        legend: {
            data: ['评分'],
            top: '5%',
            textStyle: {
                color: '#333'
            }
        },
        grid: {
            left: '3%',
            right: '3%',
            bottom: '10%',
            top: '20%',  // 调整顶部边距以避免重叠
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [],
            axisLine: {
                lineStyle: {
                    color: '#aaa'
                }
            },
            axisLabel: {
                color: '#555'
            }
        },
        yAxis: {
            type: 'value',
            min: 0,
            max: 5,
            axisLine: {
                lineStyle: {
                    color: '#aaa'
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#eee'
                }
            },
            axisLabel: {
                color: '#555'
            }
        },
        series: [{
            name: '评分',
            type: 'line',
            data: [],
            smooth: true,
            lineStyle: {
                color: '#3a3f51',
                width: 3
            },
            itemStyle: {
                color: '#3a3f51'
            },
            areaStyle: {
                color: 'rgba(58, 63, 81, 0.1)'
            }
        }]
    };

    chart.setOption(option);

    function updateChart(data) {
        let currentTime = new Date().toLocaleTimeString();

        option.xAxis.data.push(currentTime);
        option.series[0].data.push(data);

        // 保持最新的20个数据点
        if (option.xAxis.data.length > 20) {
            option.xAxis.data.shift();
            option.series[0].data.shift();
        }

        chart.setOption(option);
    }

    setInterval(() => {
        fetch('http://localhost:8081/api/ratings/list')
            .then(response => response.json())
            .then(data => {
                if (data && data.length > 0) {
                    console.log("接收到的评分数据:", data);
                    let latestRating = data[data.length - 1];
                    updateChart(latestRating);
                }
            })
            .catch(error => console.error('获取数据时出错:', error));
    }, 5000);
</script>
</body>
</html>
